<!--
 * @Descripttion: 编辑打印机
 * @Author: xiao li
 * @Date: 2020-09-30 10:32:19
 * @LastEditors: xiao li
 * @LastEditTime: 2021-10-08 16:58:33
-->
<template>
  <div class="lb-ordering-editPrint">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="page-main">
      <div style="height: 40px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="aForm"
        label-width="140px"
        class="basic-form"
      >
        <el-form-item label="打印机名称" prop="title">
          <el-input
            v-model="subForm.title"
            maxlength="40"
            placeholder="请输入打印机名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择打印机" prop="type">
          <el-select v-model="subForm.type" placeholder="请选择打印机">
            <el-option
              v-for="item in printList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form
          @submit.native.prevent
          :model="subForm"
          :rules="bFormRules"
          ref="bForm"
          label-width="140px"
          class="basic-form"
          v-if="subForm.type === 1"
        >
          <el-form-item label="USER" prop="user">
            <el-input
              v-model="subForm.user"
              placeholder="请输入飞鹅云后台注册用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="UKEY" prop="api_key">
            <el-input
              v-model="subForm.api_key"
              placeholder="请输入飞鹅云注册账号后生成的UKEY"
            ></el-input>
          </el-form-item>
          <el-form-item label="SN" prop="printer_key">
            <el-input
              v-model="subForm.printer_key"
              placeholder="请输入打印机编号"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="打印联数" prop="user_ticket_num">
          <el-select
            v-model="subForm.user_ticket_num"
            placeholder="请选择打印联数"
          >
            <el-option
              v-for="aitem in printNumList"
              :key="aitem"
              :label="aitem"
              :value="aitem"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动打印" prop="auto">
          <el-switch v-model="subForm.auto"></el-switch>
        </el-form-item>
        <el-form-item label="只打印自提点订单" prop="self">
          <el-radio-group v-model="subForm.self">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >可设置多个自提点，且只打印此处设置的自提点的订单</lb-tool-tips
          >
        </el-form-item>
        <el-form-item
          label="关联自提点"
          prop="store_id"
          v-if="subForm.self === 1"
        >
          <el-select
            v-model="subForm.store_id"
            multiple
            filterable
            placeholder="请输入名称搜索自提点并选择"
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateSend = (rule, value, callback) => {
      if (this.subForm.self === 1 && this.subForm.store_id.length === 0) {
        callback(new Error('请选择关联自提点'))
      } else {
        callback()
      }
    }
    return {
      navTitle: '',
      printList: [{
        id: 1,
        title: '飞鹅打印'
      }],
      storeList: [],
      printNumList: [1, 2, 3, 4, 5],
      subForm: {
        store_id: [],
        title: '',
        type: 1, // 1:飞蛾 2:易联云',
        user: '',
        code: '',
        api_key: '',
        printer_key: '',
        auto: false,
        user_ticket: 0,
        user_ticket_num: 1,
        kitchen_ticket: 0,
        kitchen_ticket_num: 0,
        self: 1
      },
      subFormRules: {
        title: { required: true, type: 'string', message: '请输入打印机名称', trigger: 'blur' },
        type: { required: true },
        user_ticket_num: { required: true, type: 'number', message: '请选择打印联数', trigger: 'blur' },
        self: { required: true, type: 'number', message: '请选择' },
        store_id: { required: true, validator: validateSend },
        auto: { required: true }
      },
      bFormRules: {
        user: { required: true, type: 'string', message: '请输入飞鹅云后台注册用户名', trigger: 'blur' },
        api_key: { required: true, type: 'string', message: '请输入飞鹅云注册账号后生成的UKEY', trigger: 'blur' },
        printer_key: { required: true, type: 'string', message: '请输入打印机编号', trigger: 'blur' }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.RestaurantPrintEdit' : 'menu.RestaurantPrintAdd')
    if (id) {
      this.subForm.id = id
      await this.getDetail(id)
    }
    this.getBaseInfo()
  },
  methods: {
    async getBaseInfo (id) {
      let { code, data } = await this.$api.mallsStoreSelect()
      if (code !== 200) return
      this.storeList = data
    },
    async getDetail (id) {
      let { code, data } = await this.$api.mallsPrinterInfo({ id })
      if (code !== 200) return
      data.auto = data.auto === 1
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    async submitFormInfo () {
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      let formArr = ['aForm']
      if (subForm.type === 1) {
        formArr.push('bForm')
      }
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        subForm.auto = subForm.auto === true ? 1 : 0
        subForm.store_id = subForm.self === 1 ? subForm.store_id : []
        let methodModel = subForm.id ? 'mallsPrinterUpdate' : 'mallsPrinterAdd'
        let { code } = await this.$api[methodModel](subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
        this.$router.back(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-ordering-editPrint {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader {
    width: 400px;
  }
  .flex-warp {
    .el-select {
      width: 230px;
    }
  }
}
</style>
